<template>
  <div class="content">
    <div class="mainView">
      <div class="topUrl">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/my-wallet' }">我的钱包</el-breadcrumb-item>
          <el-breadcrumb-item>财务记录</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <div class="data">
        <div class="tools">
          <el-row :gutter="20">
            <el-col :span="4">
               <span class="label"><i class="iconfont logoicon" :class="'icon-' + handleToLowerCase(bitIcon)"></i>{{bitIcon}}</span>
            </el-col>
            <el-col :span="8">
              <span class="label">类型 </span>
              <el-select v-model="type" placeholder="请选择">
                <el-option
                  v-for="item in typeList"
                  :key="item.type"
                  :label="item.desc"
                  :value="item.type">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="9">
              <span class="label">时间 </span>
              <timeVue @ListenTimeArr = "ListenTimeArr"></timeVue>
            </el-col>
            <el-col :span="3">
              <el-button type="primary" plain class="" @click="handleGetEOSList()">搜索</el-button>
            </el-col>
          </el-row>
        </div>
        <div class="tableData">
          <el-table
            :data="tableData"
            :default-sort = "{prop: 'tableData', order: 'descending'}"
            style="width: 100%">
            <el-table-column
              prop="actionTime"
              label="时间">
            </el-table-column>
            <el-table-column
              width="200px"
              label="类型">
              <template slot-scope="scope">
                {{scope.row.typeDesc}}
              </template>
            </el-table-column>
            <el-table-column
              prop="dealer"
              label="对象">
            </el-table-column>
            <el-table-column
              width="200px"
              sortable
              label="数量">
              <template slot-scope="scope">
                <span>{{scope.row.count}}</span>
                <el-popover
                  v-if="scope.row.memo"
                  placement="left"
                  title="留言"
                  width="200"
                  trigger="hover"
                  :content="scope.row.memo">
                  <i slot="reference"
                    class="iconfont logoicon icon-shuoming warn-icon">
                  </i>
                </el-popover>
              </template>
            </el-table-column>
            <!-- <el-table-column
              width="200px"
              sortable
              label="余额">
            </el-table-column> -->
          </el-table>
          <div class="tableFooter">
            <el-pagination
              :page-sizes="[10, 20, 30, 50]"
              :page-size="pageSize"
              @current-change="handleTopage"
              @size-change="handleSizeChange"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount">
            </el-pagination>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import timeVue from '@/views/order/components/time';

export default {
  data() {
    return {
      coinId: null, // 币种id
      bitIcon: 'EOS', // 币种简称
      typeList: [], // 类型列表
      type: '', // 类型
      timeArr: [], // 时间日期
      totalCount: 1, // 数据总条数
      pageSize: 10, // 默认每页条数
      tableData: [],
    };
  },
  components: {
    timeVue
  },
  methods: {
    handleSelect() {

    },
    handleSizeChange(val) {
      this.pageSize = val;
    },
    handleTopage(page) { // 分页跳转
      this.handleGetEOSList(page);
    },
    ListenTimeArr(childTimeArr) { // 监听子组件传递过来的日期范围
      this.timeArr = childTimeArr;
    },
    handleToLowerCase(str) {
      return str.toLowerCase();
    },
    handleGetEOSList(page) { // 获取财务列表
      const params = {
        currPage: page || 1, // 当前页码
        pageSize: this.pageSize, // 每页数量
        orderByName: '', // 排序字段
        orderByType: '', // 排序方式(asc, desc)
        coinId: this.coinId, // 币种id
        type: this.type || '', // 类型
        beginDate: this.timeArr[0] || '', // 开始时间
        endDate: this.timeArr[1] || '', // 结束时间
      };
      this.$http.post('/eosaction/list', params).then((res) => {
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        this.tableData = res.page ? res.page.list : [];
        this.totalCount = res.page ? res.page.totalCount : 1;
      });
    },
    handleGetTypeList() { // 获取财务类型列表
      this.$http.post('/eosaction/typeList').then((res) => {
        if (res.code !== 0) {
          this.$message.error(res.msg);
          return;
        }
        this.typeList = res.typeList;
      });
    },
  },
  created() {
    this.bitIcon = 'EOS';
    this.coinId = '1';
    this.handleGetEOSList();
    this.handleGetTypeList();
  }
};
</script>

<style lang="scss" scoped>
.content{
  .mainView{
    width: 1200px;
    margin: auto;
    padding: 20px;

    .topUrl{
      padding: 0px 0px 20px 10px;
    }

    .data{
      text-align: center;
      background-color: rgba(255, 255, 255, .8);
      padding: 20px 10px;

      /deep/ .el-range-separator{
        width: auto;
      }

      .label{
        line-height: 40px;
        margin-right: 10px;

        .icon-eos{
          margin-right: 10px;
        }
      }

      .tableData{
        /deep/ .el-table__body .cell,
        /deep/ .el-table__header .cell{
          text-align: center;
          font-weight: normal;
        }

        .warn-icon{
          color: #FEC576;
          border-radius: 50%;
        }

        .jyd-left{
          margin-left: 10px;
        }
        .jyd-right{
          color: #a2a2a2;
        }

        .red{
          color: #FF1739;
        }

        .green{
          color: #01AA21;
        }

        .tools{
          color: #278EDA;
          margin-right: 10px;
        }

        .tableFooter{
          padding: 30px;
          text-align: center;
        }
      }
    }
  }
}
.theme-1B1D27{
  .content{
    .mainView{
      .label{
        color: rgba(255, 255, 255, 0.8);
      }

      .data{
        background-color: rgba(0, 0, 0, 0.5);
      }

      /deep/ .el-breadcrumb__inner{
        color: rgba(255,255,255,0.8);
      }
    }
  }
}
</style>
